import { useState, useEffect } from 'react'

export default function useCount () {
    const [count, setCount] = useState(0)
    const [msg, setMsg] = useState('hello')
    // const arr = useState(100) //  返回值 是一个数组  数组的第一项是初始化数据 第二项是操作对应数据的方法  方法 只能是set 开头
    // console.log(arr[1])
    const [val, setVal] = useState('默认值')

    const [num, setNum] = useState(() => count + 10)

    const [obj, setObj] = useState({ name: 'zs', age: 19 })


    const [num1, setNum1] = useState(30)

    console.log('xxx1')
    const [arr, setArr] = useState([])


    const [rond, setRond] = useState(1)




    // useEffect  class    state   生命周期
    // componentDidMount    // dom  加载
    useEffect(() => {
        console.warn('三个生命周期')
        handlerMouse()
        getData()


    }, [rond])

    // useEffect(() => {
    //     console.log('useEffect 1 执行了,可以做副作用')
    // }, [])

    // useEffect(() => {
    //     console.log('useEffect 2 执行了,可以做副作用')
    // }, [])

    useEffect(() => {
        console.warn(`点击了${count}次`)
        document.title = `点击了${count}次`
    }, [count])


    console.log('xxx2')





    const handlerClick = () => {
        // setNum1(num1 + 1)
        // setNum1(num1 + 1)
        // setNum1(num1 + 1)   // 触发一次
        // console.log(num1)
        setNum1(() => num1 + 1)
        setNum1(() => num1 + 1)
        setNum1(() => num1 + 1)  //  触发 一次
        console.log(num1)

    }


    const handlerMouse = () => {
        document.addEventListener('mousemove', () => {
            console.log('綁定鼠标事件')
        })
    }

    const getData = async () => {
        let res = await fetch('http://localhost:3000/assets').then(res => res.json())
        console.log(res)

        setArr(res)
    }

    return (
        <>
            <div>  {count}</div>
            <button onClick={() => setCount(count + 1)}>点击++</button>

            <hr />
            {msg}

            <button onClick={() => setMsg('张三')}> 改变msg</button>

            <hr />
            <div> {obj.name}------- {obj.age}</div>


            {val}
            <input type="text" value={val} onChange={(e) => setVal(e.target.value)} />

            <hr />

            {num}
            <button onClick={() => setNum(num + 10)}> 点击</button>

            <hr />
            {num1}
            <button onClick={handlerClick}>点击</button>

            <hr />


            <ul>
                {
                    arr.length > 0 && arr.map(item => <li>{item.name} </li>)
                }
            </ul>


            <hr />
            <h1>{rond}</h1>
            <button style={{ backgroundColor: 'red' }} onClick={() => setRond(Math.floor(Math.random() * 3))}> 點擊</button>
        </>

    )
}